<!doctype html>
<html lang="en" class="x-admin-sm">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>网站商品每日访问统计</title>
    <link rel="stylesheet" href="./assets/css/font.css" />
    <link rel="stylesheet" href="./assets/css/xadmin.css" />
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
</head>

<body>
<div id="app">
    <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="javascript:">管理系统</a>
                <a href="javascript:">网站访问信息</a>
                <a><cite>网站每日访问统计</cite></a>
            </span>
    </div>
    <div style="margin-top:8px;"></div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-form layui-col-space5">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" id="start" v-model="start" placeholder="请输入开始日期"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" id="end" v-model="end" placeholder="请输入结束日期" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" title="查询" @click="query()"><i
                                        class="layui-icon">&#xe615;</i> 查询</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table">
                            <tr>
                                <td style="text-align: center">
                                    <div class="text-center" id="chartmain" style="width: 99%; height: 600px;">
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./assets/echart/echarts.min.js"></script>
<script type="text/javascript" src="./assets/layui/layui.js"></script>
<script type="text/javascript" src="./assets/js/axios.min.js"></script>
<script type="text/javascript" src="./assets/js/vue.js"></script>
<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
<script type="text/javascript">
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        table.render({});
        laydate.render({
            elem: "#start",
            type: "date"
        });
        laydate.render({
            elem: "#end",
            type: "date"
        });
    })
    const vue = new Vue({ // 实例化Vue对象
        el: '#app', // 绑定作用域
        data: { //定义数据 用于vue的双向绑定
            start: '', //查询关键字
            end: '',
        },
        created() { // 生命周期相关的函数
        },
        methods: {
            query: function () {
                let _this = this;
                var data = {
                    start: $('#start').val(),
                    end: $('#end').val(),
                };
                axios.post('http://localhost:8080/vue_gxhfztjxt/chart/chartDayVisit.action', data).then(
                    result => {
                        let days = result.data.days.replace("[", "").replace("]", "").replace("{",
                            "").replace("}", "").replaceAll("\"", "").split(",");
                        let total = result.data.total.replace("[", "").replace("]", "").replace("{",
                            "").replace("}", "").replaceAll("\"", "").split(",");
                        let option = {
                            title: {
                                text: '网站商品访问统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c}'
                            },
                            legend: {
                                left: 'left',
                            },
                            xAxis: {
                                type: 'category',
                                name: 'x',
                                splitLine: {
                                    show: false
                                },
                                data: days
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '访问次数',
                                type: 'line',
                                data: total
                            }]
                        };
                        // 初始化echarts实例
                        let myChart = echarts.init(document.getElementById('chartmain'));
                        // 使用制定的配置项和数据显示图表
                        myChart.setOption(option);
                    });
            },
        },
    });
</script>

</body>

</html>